<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<title>写评价</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/comment.css" />
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		html,
		body {
			font-size: 20px;
			height: 100%;
			position: relative;
		}
	</style>

	<body>
		<div class="main">
			<p>评价此课程</p>
			<div id="fraction" class="fraction" v-cloak>
				<img v-bind:src="item.icon" v-for="(item,index) in dark_stars" @click="fraction(index)" />
			</div>
			<div class="main_content">
				<textarea id="comment_content" placeholder="在此输入您的评论"></textarea>
			</div>
			<div class="but" onclick="submit()">
				提交评论
			</div>
		</div>
		<div class="fail">
			请选择评分
		</div>
		<div class="fail_two">
			评价成功
		</div>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			getOpenId();
			var data = {
				dark_stars: [{
					icon: 'img/41@3x.png'
				}, {
					icon: 'img/41@3x.png'
				}, {
					icon: 'img/41@3x.png'
				}, {
					icon: 'img/41@3x.png'
				}, {
					icon: 'img/41@3x.png'
				}],
				score: 0,
				openid: open_id,
			};
			var fraction = new Vue({
				el: '#fraction',
				data: data,
				methods: {
					init() {
						var self = this;
					},
					fraction(index) {
						var self = this;
						self.dark_stars = [{
							icon: 'img/41@3x.png'
						}, {
							icon: 'img/41@3x.png'
						}, {
							icon: 'img/41@3x.png'
						}, {
							icon: 'img/41@3x.png'
						}, {
							icon: 'img/41@3x.png'
						}];
						for(var i = 0; i < index + 1; i++) {
							self.dark_stars[i].icon = 'img/40@3x.png'
						};
						self.score = index + 1;
					},
				}
			});
			fraction.init();

			function submit() {
				var comment_content = $("#comment_content").val();
				if(data.openid) {
					if(data.score != 0) {
						//调用评价接口
						$.ajax({
							url: apiPath + 'course/add-comment',
							type: 'post',
							dataType: 'json',
							data: {
								comment_content: comment_content,
								open_id: data.openid,
								comment_score: data.score,
								course_id: GetQueryString('id'),
								flagsign: 1
							},
							success() {
								$(".fail_two").show();
								setTimeout(function() {
									if(GetQueryString("extend_type")) {
										window.location.href = GetQueryString("url") + "&extend_type=" + GetQueryString("extend_type");
									} else {
										window.location.href = GetQueryString("url")
									}
								}, 500);
							}
						});
					} else {
						$(".fail").show();
						setTimeout(function() {
							$(".fail").hide();
						}, 1000);
					}
				}
			}
			// 兼容Android 键盘弹起时,影响布局
			var h = document.body.scrollHeight // 用onresize事件监控窗口或框架被调整大小，先把一开始的高度记录下来
			window.onresize = function() { // 如果当前窗口小于一开始记录的窗口高度，那就让当前窗口等于一开始窗口的高度
				if(document.body.scrollHeight < h) {
					document.body.style.height = h + "px"
				}
			}
		</script>
	</body>

</html>